<template>
	<cxView padding="20rpx">
		<cxView display="flex" justify-content="space-between" align-items="center">
			<cxView display="flex" align-items="center">
				<cxImg color="#999" :src="titleLeftImg" width="30" height="30" size="30"></cxImg>
				<cxView>{{title}}</cxView>
			</cxView>
			<cxImg color="#999" src="close" width="40" height="40" size="40" @confirm="closeClick"></cxImg>
		</cxView>
		<cxView>
			<slot></slot>
		</cxView>
		<cxView display="flex" justify-content="space-around" marginTop="20">
			<cxView :background="cancelBg" padding="10rpx 30rpx" width="200" text-align="center" borderRadius="12"
				@confirm="cancelClick" :border="cancelBorder" :color="cancelColor">{{cancelTitle}}</cxView>
			<cxView :background="confirmBg" :border="confirmBorder" padding="10rpx 30rpx" width="200"
				text-align="center" borderRadius="12" :color="confirmColor" @confirm="confirmClick">{{confirmTitle}}
			</cxView>
		</cxView>
	</cxView>
</template>

<script>
	export default {
		name: "cxAlertView",
		data() {
			return {

			};
		},
		props: {
			title: {
				type: String,
				default: "提醒"
			},
			titleLeftImg: {
				type: String,
				default: "checkmark-circle"
			},

			cancelTitle: {
				type: String,
				default: "取消"
			},
			cancelBg: {
				type: String,
				default: "transparent"
			},
			cancelColor: {
				type: String,
				default: "white"
			},
			cancelBorder: {
				type: String,
				default: ""
			},

			confirmTitle: {
				type: String,
				default: "确定"
			},
			confirmBg: {
				type: String,
				default: ""
			},
			confirmColor: {
				type: String,
				default: ""
			},
			confirmBorder: {
				type: String,
				default: ""
			},


		},
		methods: {
			//右上角关闭事件
			closeClick() {
				this.$emit("closeClick")
			},
			//取消按钮点击事件
			cancelClick() {
				this.$emit("cancelClick")
			},
			/**
			 * 确定按钮点击事件
			 */
			confirmClick() {
				this.$emit("confirmClick")
			}
		}

	}
</script>

<style>

</style>